<script setup lang="ts">
import type{ Ref } from 'vue';
import { scsDataFn } from '@/api/register';
import { computed, ref } from 'vue';
import { useRouter } from 'vue-router';

const flag = computed(() => {
    return /^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(phone.value) != true||value.value.length <=6||value.value !=value2.value||sms.value.length!=5||smsdata.value!=sms.value
    })
let smsdata=ref('')

const show = ref(false);
const time: Ref<number> = ref(10)
const text: Ref<string> = ref('发送验证码')
const router =useRouter()
function backClick(){
    router.go(-1)
}
let timeout: any = null
let isSend = false
const sms =ref('')
const phone =ref('')
const value=ref('')
const value2=ref('')
function smsClick(){
    if (isSend == true) {
        return
    }
    isSend = true
    scsDataFn().then(res=>{
        console.log(res.data);
        smsdata.value=res.data.scsData
        console.log(smsdata.value);
        
    })
    const timer = setInterval(() => {
        isSend = false
        time.value--
        text.value = time.value + 's 后获取'
        if (time.value == 0) {
            // 倒计时结束
            time.value = 10
            text.value = '重新获取'
            // 关闭定时器
            clearInterval(timer)
        }
    }, 1000);
}


function forgetClick(){
    let  values=localStorage.getItem('login')||''
    let newvalues=JSON.parse(values)
    for (let i = 0; i < newvalues.length; i++) {
        if(newvalues[i].tel==phone.value){
            if(newvalues[i].password ==value.value){
                console.log('密码不能和之前密码一致');
                
            }else{
                newvalues[i].password =value.value
                console.log('密码修改成功');
                newvalues=JSON.stringify(newvalues)
                localStorage.setItem('login',String(newvalues))
                router.push('/login')
            }
        }
        
    }

}
</script>
<template>
    <main class="box">
        <header class="header">
      <slot  name="left">
      <div class="back">
        <van-icon color="#d6d6d6" size="20" @click="backClick" name="arrow-left" />
        <span @click="backClick">返回</span>
      </div>
 
      </slot>
      <span>忘记密码</span>
      <slot name="right"></slot>
  </header>
    <div class="content"> 
        <div class="forgetbox">
    <van-field
    v-model="phone"
    left-icon="lock"
    placeholder="输入手机号"
    class="tel"
  ></van-field>
  <van-field
    v-model="sms"
    center
    clearable
    class="sms"
    label="短信验证码"
    placeholder="请输入短信验证码"
  >
    <template #button>
      <van-button :disabled="time < 10" @click="smsClick" size="small" type="primary">{{text}}</van-button>
    </template>
  </van-field>
    <van-field
    v-model="value"
    left-icon="lock"
    placeholder="输入新密码"
    class="password"
  >
  </van-field>
  <van-field
    v-model="value2"
    left-icon="lock"
    placeholder="输入再次输入密码"
    class="password2"
  >
  </van-field>
  <button class="login" :disabled="flag" @click="forgetClick">确认</button>
        </div>
    </div>
    </main>
</template>

<style lang="scss" scoped>
  .header{
    color: black;
    background-color: white;
   .back{
    position: absolute;
    left: 0;
    top: 0;
   
   }
}
.forgetbox{
    width: 100%;
        height: 100%;
        background-image: url("https://img95.699pic.com/xsj/0o/q1/yf.jpg%21/fh/300");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        opacity: 0.7;
        position: absolute;
        top: 0;
        left: 0;
}
    .tel{
        position: absolute;
        width: 90%;
        height: 50px;
        left: 5%;
        top: 1.6rem;
        border-radius: 10px;
    }
    .password{
        position: absolute;
        width: 90%;
        height: 50px;
        left: 5%;
        top: 2.8rem;
        border-radius: 10px;
    }
    .password2{
        position: absolute;
        width: 90%;
        height: 50px;
        left: 5%;
        top: 3.4rem;
        border-radius: 10px;
    }
    .sms{
        position: absolute;
        width: 90%;
        height: 50px;
        left: 5%;
        top: 2.2rem;
        border-radius: 10px;
    }
    .login{
            position: absolute;
        width: 90%;
        background-color: #4a73ff;
        height: 56px;
        left: 5%;
        top: 4rem;
        border-radius: 10px;
        color: white;
        font-size: 20px;
        }
</style>
    